/** @type {import('tailwindcss').Config} */
import { addDynamicIconSelectors } from '@iconify/tailwind'
import daisyui from 'daisyui'
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontSize: Array.from({ length: 50 }, (_, i) => i + 12).reduce((acc, size) => {
        acc[size] = `${size / 100}rem`
        return acc
      }, {}),
    },
    spacing: Array.from({ length: 2000 }).reduce((map, _, index) => {
      map[index] = `${index / 100}rem`
      return map
    }, {}),
  },
  plugins: [
    daisyui,
    addDynamicIconSelectors(),
    function ({ addUtilities }) {
      const newUtilities = {
        '.flex-center': {
          '@apply flex justify-center items-center': {},
        },
        '.flex-x-center': {
          '@apply flex justify-center': {},
        },
        '.flex-y-center': {
          '@apply flex items-center': {},
        },
        '.flex-x-between': {
          '@apply flex items-center justify-between': {},
        },
        '.flex-x-end': {
          '@apply flex items-center justify-end': {},
        },
        '.wh-full': {
          '@apply w-full h-full': {},
        },
        '.text-truncate': {
          '@apply whitespace-nowrap overflow-hidden text-ellipsis': {},
        },
        '.bg-no-repeat-contain': {
          '@apply bg-no-repeat bg-contain': {},
        },
        '.bg-no-repeat-cover': {
          '@apply bg-no-repeat bg-cover': {},
        },
        '.abs-full': {
          '@apply absolute left-0 right-0 top-0 bottom-0': {},
        },
        '.abs-x-center': {
          '@apply absolute left-1/2 top-0 -translate-x-1/2': {},
        },
        '.abs-y-center': {
          '@apply absolute left-0 top-1/2 -translate-y-1/2': {},
        },
        '.abs-center': {
          '@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2': {},
        },
      }
      addUtilities(newUtilities)
    },
  ],
}
